<template>
	<view>
		<nav-header :title="title" :show-right="false">
		</nav-header>
		<up-loading-page :loading="loading"></up-loading-page>
		<up-tabs :list="tabList" @change="changeTab" :scrollable="false"></up-tabs>
		<view class="search">
			<up-search placeholder="搜索" v-model="searchText" :clearabled="true" :showAction="false" bg-color="#f5f5f5"
				search-icon-color="#474a52" placeholder-color="#82868d" height="40"></up-search>
			<button @click="getsearchlist()">搜索</button>
		</view>
		<scroll-view scroll-y="true" v-show="tabActive == '行政群'&&sourceType!=2">
			<view v-if="officialGroupList.length == 0 && !loading">
				<up-empty :icon="getResource('/icon/none.svg')" text="暂无数据">
				</up-empty>
			</view>
			<view v-if="groupType == 2 && officialGroupList.length">
				<!-- <up-collapse ref="collapse" @change="change" @close="close" @open="open">
				<up-collapse-item title="行政群" name="open"> -->
				<view v-for="(user) in officialGroupList" :key="user.id">
					<view class="user-item" @tap.stop.native="goJoin(user.id)">
						<!-- <image :src="user.headImage" alt="" class="avr-img" /> -->
						<head-image :name="user.showGroupName" :url="user.headImage" :size="90"
							:isGroup="true"></head-image>
						<view class="user-name">
							<view class="fc">
								<badge type="business-group" :title="user.badge"></badge>
								<text class="title text-md-Medium">{{ user.showGroupName }}</text>
							</view>
							<view class="board">
								<BoardPanel width="150" v-model="user.id" />
							</view>
							<view class="user-person">
								<!-- <uni-icons type="person" size="22"></uni-icons> -->
								<svg-icon icon="人数" :width="34"></svg-icon>
								<text class="text-sm-Regular">{{ user.memberSize }}人</text>
							</view>
						</view>
						<view class="user-btns">
							<!-- <button type="primary" style="background-color: #0389ff;color: #fff;"
									v-if="!haveGroup(user.id)" size="mini"
									@tap.stop.native="goJoin(user.id)">加入群聊</button> -->
							<!-- <button type="primary" style="background-color: #0389ff;color: #fff;"
									v-if="!haveGroup(user.id)" size="mini"
									@tap.stop.native="addGroup(user.id)">加入群聊</button> -->
							<button class="btncolor" type="primary" v-if="!haveGroup(user.id)" size="mini"
								@tap.stop.native="goJoin(user.id)">
								<text class="text-xs-Medium">加入群聊</text>
							</button>
							<!-- <button class="btncolor" type="primary" v-if="!haveGroup(user.id)" size="mini"
								@tap.stop.native="addGroup(user.id)">
								<text class="text-xs-Medium">加入群聊</text>
							</button> -->
							<button type="default"
								style="color: #aaa;border-radius: 34rpx;border-left: 1rpx solid #e7e7e7;border-right: 1rpx solid #e7e7e7;"
								v-if="haveGroup(user.id)" size="mini">已添加</button>
						</view>
					</view>
				</view>
				<view style="padding: 20px;" v-if="this.hasMore">
					<up-button type="primary" :loading="loading" @tap="getAdminGroup">加载更多</up-button>
				</view>
				<!-- </up-collapse-item>
			</up-collapse> -->
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" v-show="tabActive == '关联群'">
			<view v-if="Reletegroup.length == 0 && !loading">
				<up-empty :icon="getResource('/icon/none.svg')" text="暂无数据">
				</up-empty>
			</view>
			<view class="search-rec">
				<view v-for="(user) in Reletegroup" :key="user.id" v-if="Reletegroup.length">
					<view class="user-item" @tap="goJoin(user.id)">
						<!-- <image :src="user.headImage" alt="" class="avr-img" /> -->
						<head-image :name="user.showGroupName" :url="user.headImage" :size="90"
							:isGroup="true"></head-image>
						<view class="user-name">
							<view class="fc">
								<badge type="business-group" :title="user.badge"></badge>
								<text class="title text-md-Medium">{{ user.showGroupName }}</text>
							</view>
							<view class="board">
								<BoardPanel width="150" v-model="user.id" height="25" />
							</view>
							<view class="user-person">
								<!-- <uni-icons type="person" size="22"></uni-icons> -->
								<svg-icon icon="人数" :width="34"></svg-icon>
								<text class="text-sm-Regular">{{ user.memberSize }}人</text>
							</view>
						</view>
						<view class="user-btns">
							<button class="btncolor" type="primary" v-if="!haveGroup(user.id)" size="mini"
								@tap.stop.native="goJoin(user.id)">加入群聊</button>
							<button type="default"
								style="color: #aaa;border-radius: 34rpx;border-left: 1rpx solid #e7e7e7;border-right: 1rpx solid #e7e7e7;"
								v-if="haveGroup(user.id)" size="mini">已添加</button>
						</view>
					</view>
				</view>
				<view style="padding: 20px;" v-if="this.hasMore && Reletegroup.length != 0">
					<up-button type="primary" :loading="loading" @tap="getReleteGroup">加载更多</up-button>
				</view>
			</view>
		</scroll-view>

		<scroll-view scroll-y="true" v-show="tabActive == '本群关联'&&group.groupType!=2">
			<view v-if="MainGroup.length == 0 && !loading">
				<up-empty :icon="getResource('/icon/none.svg')" text="暂无数据">
				</up-empty>
			</view>
			<view class="search-rec">
				<view v-for="(user) in MainGroup" :key="user.id" v-if="MainGroup.length">
					<view class="user-item" @tap="goJoin(user.id)">
						<!-- <image :src="user.headImage" alt="" class="avr-img" /> -->
						<head-image :name="user.showGroupName" :url="user.headImage" :size="90"
							:isGroup="true"></head-image>
						<view class="user-name">
							<view class="fc">
								<badge type="business-group" :title="user.badge"></badge>
								<text class="title text-md-Medium">{{ user.showGroupName }}</text>
							</view>
							<view class="board">
								<BoardPanel width="150" v-model="user.id" height="25" />
							</view>
							<view class="user-person">
								<!-- <uni-icons type="person" size="22"></uni-icons> -->
								<svg-icon icon="人数" :width="34"></svg-icon>
								<text class="text-sm-Regular">{{ user.memberSize }}人</text>
							</view>
						</view>
						<view class="user-btns">
							<button class="btncolor" type="primary" v-if="!haveGroup(user.id)" size="mini"
								@tap.stop.native="goJoin(user.id)">加入群聊</button>
							<button type="default"
								style="color: #aaa;border-radius: 34rpx;border-left: 1rpx solid #e7e7e7;border-right: 1rpx solid #e7e7e7;"
								v-if="haveGroup(user.id)" size="mini">已添加</button>
						</view>
					</view>
				</view>
				<view style="padding: 20px;" v-if="this.hasMore && MainGroup.length != 0">
					<up-button type="primary" :loading="loading" @tap="getMainGroupByGroupId">加载更多</up-button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import BoardPanel from '@/components/board-panel/board-panel.vue';
	export default {
		components: {
			BoardPanel
		},
		data() {
			return {
				searchText: "",
				groupId: null,
				groupType: null,
				sourceType: null,
				officialGroupList: [],
				title: "",
				Reletegroup: [],
				MainGroup: [],
				group: {},
				pageNum: 1,
				pageSize: 10,
				loading: false,
				hasMore: false,
				badge: null,
				fullTabList: [{
						name: '关联群'
					}, {
						name: '行政群'
					},
					{
						name: '本群关联'
					}
				],
				tabActive: "关联群"
			}
		},
		computed: {
			tabList() {
				let list = [...this.fullTabList];
				if (this.group.groupType == 2 || (!this.isOwner && !this.isAdmin)) {
					// 移除“本群关联”
					list = list.filter(item => item.name !== '本群关联');
				}
				if (this.sourceType == 2 || this.group.groupType != 2) {
					// 移除“行政群”
					list = list.filter(item => item.name !== '行政群');
				}
				return list;
			},
			isOwner() {
				return this.group.ownerId == this.userStore.userInfo.id;
			},
			isAdmin() {
				if (this.group.groupAdmin) {
					return this.group.groupAdmin.includes(this.userStore.userInfo.id);
				} else {
					return false
				}
			}
		},
		methods: {
			getsearchlist(){
				this.resetPagination()
				if (this.tabActive == '关联群') {
					this.getReleteGroup();
				} else if (this.tabActive == '行政群') {
					this.getAdminGroup();
				} else {
					this.getMainGroupByGroupId()
				}
			},
			changeTab({
				name
			}) {
				this.resetPagination()
				this.tabActive = name;
				if (name === '本群关联') {
					this.getMainGroupByGroupId()
				} else if (name === '行政群') {
					this.getAdminGroup();
				} else {
					this.getReleteGroup();
				}

			},
			resetPagination() {
				this.pageNum = 1;
				this.pageSize = 10;
				this.hasMore = false;
				this.loading = false;
				this.Reletegroup = []
				this.officialGroupList = []
				this.MainGroup = []
			},
			addGroup(id) {
				let data = {
					groupId: id,
					ids: [this.userStore.userInfo.id]
				}
				this.$http({
					url: "/group/addGroupMemberByGroupId",
					method: "POST",
					data: data
				}).then(() => {
					uni.showToast({
						title: "加入官方群成功",
						icon: "none"
					})
				})
			},
			loadGroupInfo() {
				this.$http({
					url: `/group/find/${this.groupId}`,
					method: 'GET'
				}).then((group) => {
					this.group = group;
					console.log(this.group)
				});
			},
			getAdminGroup() {
				if (this.loading) return
				this.loading = true
				this.$http({
					url: `/group/findSubOfficialGroup?pageNum=${this.pageNum}&pageSize=${this.pageSize}&groupId=${this.groupId}&groupName=${this.searchText}`,
					method: "GET"
				}).then((res) => {
					if (res.records.length > 0) {
						// this.officialGroupList = res.records
						res.records.forEach(item => {
							let firstFour = item.showGroupName.slice(0, 4);
							const lastTwo = firstFour.slice(-2); // 获取前4个字符的最后2个字符
							if (firstFour.length === 4 && ["官", "民", "社", "在"].includes(firstFour.slice(-1))) {
								// 如果最后一个字是“官”，则删除它
								firstFour = firstFour.slice(0, 3);
							}
							if(lastTwo==="村村"){
								firstFour = firstFour.slice(0, 3);
							}
							item.badge = firstFour;
						})
						this.officialGroupList.push(...res.records)
						this.pageNum++
					}
					this.hasMore = res.pages != res.current
					this.loading = false
				})

			},
			getReleteGroup() {
				if (this.loading) return
				this.loading = true
				let data = {
					leaderGroup: this.groupId,
					groupName:this.searchText
				}
				this.$http({
					url: `/group/findRelateGroups?pageNum=${this.pageNum}&pageSize=${this.pageSize}`,
					method: "POST",
					data: data
				}).then((res) => {
					if (res.records.length > 0) {
						res.records.forEach(item => {
							let firstFour = item.showGroupName.slice(0, 4);
							if (firstFour.length === 4 && firstFour.slice(-1) === "官") {
								// 如果最后一个字是“官”，则删除它
								firstFour = firstFour.slice(0, 3);
							}
							item.badge = firstFour;
						})
						this.Reletegroup.push(...res.records)
						this.pageNum++
					}
					this.hasMore = res.pages != res.current
					this.loading = false
				})

			},
			getMainGroupByGroupId() {
				if (this.loading) return
				this.loading = true
				let data = {
					followGroup: this.groupId,
					groupName:this.searchText
				}
				this.$http({
					url: `/group/getMainGroupByGroupId?pageNum=${this.pageNum}&pageSize=${this.pageSize}`,
					method: "POST",
					data: data,
				}).then((res) => {
					if (res.records.length > 0) {
						res.records.forEach(item => {
							let firstFour = item.showGroupName.slice(0, 4);
							if (firstFour.length === 4 && firstFour.slice(-1) === "官") {
								// 如果最后一个字是“官”，则删除它
								firstFour = firstFour.slice(0, 3);
							}
							item.badge = firstFour;
						})
						this.MainGroup.push(...res.records)
						this.pageNum++
					}
					this.hasMore = res.pages != res.current
					this.loading = false
				})
			},
			goJoin(id) {
				uni.navigateTo({
					url: "/pageSubOne/group/group-join?id=" + id
				})
			},
			open(e) {
				// console.log('open', e)
			},
			close(e) {
				// console.log('close', e)
			},
			change(e) {
				// console.log('change', e)
			},
			isFriend(userId) {
				let friends = this.friendStore.friends;
				let friend = friends.filter(f => f !== null).find((f) => f.id == userId);
				return !!friend;
			},
			haveGroup(id) {
				let groups = this.groupStore.groups
				let group = groups.filter(g => g !== null).find((g) => g.id == id);
				return !!group
			}
		},
		/* onReachBottom() {
			if (this.hasMore && !this.loading) {
				this.getAdminGroup();
			}
			if (!this.hasMore) {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none'
				});
				return
			}
		}, */
		onLoad(options) {
			const params = JSON.parse(options.urlOfficial)
			this.groupId = params.id;
			this.groupType = params.groupType
			this.sourceType = Number(params.sourceType)
			this.title = `${params.title}子目录`
			this.getReleteGroup()
			this.loadGroupInfo()
			console.log("this", this.loading)
		}
	}
</script>

<style lang="scss" scoped>
	.board {
		pointer-events: none;
	}
	.search {
		
		padding-bottom: 20rpx;
		height: 70px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 90%;
		margin: 0 auto;
	
		:deep(.u-search__content) {
			border-radius: 12px !important;
		}
		button{
			color: #fff;
			background-color: $brand-500;
			border-radius: 20%;
			margin-left: 10px;
			line-height: 40px;
		}
	}

	.user-btns {

		// button {
		// 	width: 100%;
		// 	font-size: 20rpx;
		// 	text-align: center;
		// }
		.btncolor {
			background-color: $brand-500;
			color: $white;
			padding: 8rpx 24rpx;
			border-radius: 34rpx;
			text-align: center;
			line-height: 36rpx;
		}
	}

	.user-item {
		height: 120rpx;
		display: flex;
		margin-bottom: 1rpx;
		position: relative;
		padding: 0 30rpx;
		align-items: center;
		background-color: white;
		white-space: nowrap;
		margin-top: 30rpx;
		gap: 16rpx;

		.avr-img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 16%;
		}

		.user-name {
			flex: 1;
			white-space: nowrap;
			overflow: hidden;
			color: $gray-900;

			.fc {
				display: flex;
				align-items: center;
				gap: 8px;

				.title {
					width: 100%;
					display: inline-block;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
			}
		}

		.user-person {
			display: flex;
			align-items: center;
			gap: 10rpx;
			color: $gray-600;
			// margin-top: 5rpx;
		}
	}

	.search-rec {
		width: 100%;

		button {
			font-size: 25rpx;
		}

		.rec-title {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
		}

		.avr-img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 16%;
		}

		.user-item {
			display: flex;
			margin-bottom: 1rpx;
			position: relative;
			padding: 0 30rpx;
			align-items: center;
			background-color: white;
			white-space: nowrap;
			margin-top: 30rpx;

			.user-name {
				flex: 1;
				font-size: 28rpx;
				white-space: nowrap;
				overflow: hidden;
			}

			.user-person {
				display: flex;
				align-items: center;
				gap: 10rpx;
				color: $gray-600;
				// margin-top: 5rpx;
			}
		}
	}
</style>